<template>
	<view class="content">
		<!-- 确认兑换弹窗 -->
		<uni-popup :show="type === 'exchange'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<view class="uni-tip-content">兑换所需开心果数量：
					<text style="color: #EC6104;">{{exhappynum}}</text>
				</view>
				<view style="text-align: center;margin: 16upx 0;color: #333;font-size: 30upx;">我的开心果数量：<text style="color:#EC6104;">{{myhappy}}</text></view>
				<view style="padding:0 20upx 40upx 20upx;font-size: 30upx;color: #333;text-align: center;">
					<input type="password" placeholder="请输入安全密码" v-model="safeword">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			返单中心
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view style="padding-top:168upx;">
			<view class="navbar">
				<view v-for="(navitem, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
				 @click="tabClick(index)">
					{{navitem.text}}
				</view>
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getPanicBuying('page')">
					<view v-if="tabItem.loaded === true && tabItem.orderList.length === 0" class="empty">
						<image src="/static/empty.png" mode="widthFix"></image>
						<view class="empty-tips">
							暂无数据~
						</view>
					</view>
					<view v-for="(item,index) in tabItem.orderList" :key="index" style="font-size: 28upx;margin-bottom:20upx;position: relative;background-color: #ffffff;padding: 26upx 30upx;">
						<view style="display: flex;justify-content: space-between;padding-bottom: 10upx;border-bottom: 2upx solid #eee;">
							<text style="font-size: 26upx;color: #666;">订单号:{{item.order_no}}</text>

						</view>
						<view style="display: flex;align-items: center;position: relative;padding-top: 10upx;">
							<image :src="item.items[0].images" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
							<view style="display: flex;flex-direction: column;justify-content: space-between;flex:1;font-size: 28upx;color: #333;">
								<view class="goods-info">
									{{item.items[0].title}}
								</view>
								<view style="color: #EC6104;font-size: 28upx;font-weight: 500;margin-top:16upx;">
									￥{{item.price}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top:8upx;">
									开始时间：{{item.add_time}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top: 8upx;">
									完成时间：{{item.collect_time}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top: 8upx;" v-if="tabCurrentIndex==1">
									返单时间：{{item.upd_time}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top: 8upx;" v-if="tabCurrentIndex==2">
									转让时间：{{item.assignment_time}}
								</view>
							</view>
						</view>
						<view class="flex aic fsb" style="font-size: 28upx;color: #666;margin-top: 12upx;padding-top:16upx;">
							<view v-if="tabCurrentIndex==0">返单所需开心果数量：{{item.items[0].pistachio}}</view>
							<view v-if="tabCurrentIndex==1">消耗开心果数量：{{item.items[0].pistachio}}</view>
							<!-- <view>兑换状态：<text :style="{color:(tabCurrentIndex==0?'#EC6104':(tabCurrentIndex==2?'#1D84E8':''))}">{{navList[tabCurrentIndex].text}}</text></view> -->
						</view>
						<button class="rebtn sure" v-if="tabCurrentIndex == 0" @click="duihuan(item)">返单</button>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken: '', // token
				panicbuying: [],
				tabCurrentIndex: 0, //头部切换
				// 加载的属性
				loadingType: 0,
				page_total: '',
				pageindex: 0,
				type: '',
				exhappynum: 0, // 兑换所需开心果数量
				exchangeItem: {}, //兑换的订单
				myhappy: 0,
				// 自己所有的开心果数量
				safeword: '', //安全密码
				current: '', //swiper切换
				navList: [{
						state: 0,
						text: '可返单',
						orderList: [],
						loadingType: 'more'
					},
					{
						state: 1,
						text: '已返单',
						orderList: [],
						loadingType: 'more',
					},
					{
						state: 2,
						text: '不可返单',
						orderList: [],
						loadingType: 'more',
					}
				],
			}
		},
		components: {
			uniLoadMore,
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getPanicBuying()
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('user/Center', {
						token: that.userToken
					}, function(data) {
						resolve(data.data.user.pistachio);
					})
				})
			},
			async duihuan(i) {
				let that = this
				that.exchangeItem = i
				that.exhappynum = i.items[0].pistachio
				let mycolor = await that.getUserInfo()
				that.myhappy = mycolor
				if (Number(that.exhappynum) > Number(mycolor)) {
					uni.showToast({
						icon: 'none',
						title: '开心果不足'
					})
					return
				} else {
					that.type = 'exchange'
				}

			},
			//兑换
			confirmOrder() {
				let that = this
				if (that.safeword == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入安全密码'
					})
					return
				}
				let postdata = {
					token: that.userToken,
					order_id: that.exchangeItem.id,
					paypwd: that.safeword
				}

				postAjax('Returnorder/ReturnOrder', postdata, function(data) {
					if (data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '返单成功'
						})
						setTimeout(() => {
							//返单成功后删除可返单中的这一项
							// 增加返单成功后的那一项
							// let list = that.navList[0].orderList;
							// let index = list.findIndex(val => val.id === that.exchangeItem.order_id);
							// index !== -1 && list.splice(index, 1);
							let payList = that.navList[0].orderList
							let collectList = that.navList[1].orderList
							console.log(collectList)
							if (payList.length > 0) {
								let payindex = payList.findIndex(payval => payval.id === that.exchangeItem.id);
								if (payindex !== -1) {
									let odiv = payList[payindex]
									// odiv.state = 1
									if(collectList.loaded === true){
										collectList.unshift(odiv)
									}
									payList.splice(payindex, 1)
								}
							}
						}, 300)
					} else {
						uni.showToast({
							icon: 'none',
							title: '返单失败'
						})
					}
					that.safeword = ''
					that.type = ''
				})
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.getPanicBuying('tabChange');
			},
			//获取订单列表
			getPanicBuying(source) {
				//这里是将订单挂载到tab列表下
				let that = this
				let index = that.tabCurrentIndex;
				let navItem = that.navList[index];
				let state = navItem.state;
				let postdata = {}
				if (source === 'tabChange' && navItem.loaded === true) {
					that.pageindex = navItem.loadindex
					return;
				}
				if (source === 'tabChange' && navItem.loaded !== true) {
					that.pageindex = 0
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (source === 'page') {
					// that.pageindex++
				}
				postdata = {
					token: that.userToken,
					m: that.pageindex,
					n: 4,
					status: state,
				}
				navItem.loadingType = 'loading';
				// 我的订单列表
				let myorderList = []
				// 获取的订单数据
				postAjax('Returnorder/ReturnOrderList', postdata, function(data) {
					console.log(data)
					if (data.code == 0) {


						myorderList = data.data
						if (myorderList.length > 0) {
							myorderList.forEach(item => {
								navItem.orderList.push(item);
							})
							if (navItem.orderList.length > 4) {
								navItem.loadingType = 'more';

							} else {
								navItem.loadingType = 'nodata';
								// that.pageindex--
							}
							that.pageindex++
							that.$set(navItem, 'loadindex', that.pageindex);
						} else {
							navItem.loadingType = 'noMore';
						}
						if (navItem.orderList.length == 0) {
							navItem.loadingType = 'nodata';
						}
						that.$set(navItem, 'loaded', true);
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.cancel {
		color: #fff;
		border: 2upx solid #ccc;
		background-color: #ccc;
	}

	.sure {
		color: #fff;
		border: 2upx solid #EC6104;
		background-color: #EC6104;
	}

	.pageHeader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 128upx;
		background-color: #1D84E8;
		line-height: 128upx;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.rebtn {
		display: inline-block;
		font-size: 30upx;
		border-radius: 8upx;
		height: 58upx;
		line-height: 58upx;
		position: absolute;
		bottom: 26upx;
		right: 40upx;
	}

	.rebtn::after {
		border: none;
	}

	.regoodbox {
		padding: 170upx 0upx 22upx;
	}

	.total-wrap {
		width: 100vw;
		height: auto;
		box-sizing: border-box;
		padding: 20upx;
	}

	.logistics-title {
		position: relative;
		box-sizing: border-box;
		padding: 16upx 0;
		border-bottom: 2upx solid #EEEEEE;
		line-height: 28upx;
		color: #4B4B4B;
		font-size: 26upx;
		font-family: 'PingFangSC-Medium';
		text-align: left;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: -10vh;
		align-items: center;

	}


	.swiper-box {
		height: calc(100% - 144px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.uni-swiper-item {
		height: auto;
	}


	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}

	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;

	}

	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		padding: 0 10upx;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
		margin-bottom: 10upx;
	}

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}

	.current {
		color: #EC6104;
	}

	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 10px 0 4upx;
		text-align: center;
		font-size: 16px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
